<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-no-swiping">
        <div class="chart-container">
          <el-row>
            <el-col :span="12" :xs="24" :sm="24" :md="12">
              <div class="con-chart">
                <DataTimeLine
                  :width="chartAdjust.width"
                  :height="chartAdjust.height"
                />
              </div>
            </el-col>

            <el-col
              :span="12"
              :xs="24"
              :sm="24"
              :md="12"
              class="hidden-sm-and-down"
            >
              <div class="con-chart">
                <DataBar
                  :width="chartAdjust.width"
                  :height="chartAdjust.height"
                />
              </div>
            </el-col>
          </el-row>
          <h1 class="title">政策及关键词</h1>
        </div>
      </div>
      <div class="swiper-slide swiper-no-swiping">
        <div class="chart-container">
          <el-row>
            <el-col :span="12" :xs="24" :sm="24" :md="12">
              <div class="con-chart">
                <DataRadar
                  :width="chartAdjust.width"
                  :height="chartAdjust.height"
                />
              </div>
            </el-col>
            <el-col
              :span="12"
              :xs="24"
              :sm="24"
              :md="12"
              class="hidden-sm-and-down"
            >
              <div class="con-chart">
                <DataMap
                  :width="chartAdjust.width"
                  :height="chartAdjust.height"
                />
              </div>
            </el-col>
          </el-row>
          <h1 class="title">自然灾害</h1>
        </div>
      </div>
      <div class="swiper-slide swiper-no-swiping">
        <div id="last" class="chart-container">
          <DataPie :width="pieAdjust.width" :height="pieAdjust.height" />
          <h1 class="title">取得成效</h1>
        </div>
      </div>
    </div>
    <div class="swiper-button-prev" />
    <div class="swiper-button-next" />
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.min.css'

import Swiper from 'swiper'

import { Chart } from '@/config/chart'
import { adjust } from '@/utils/adjust'

export default {
  name: 'Scroll',
  components: {
    DataBar: () => import('./charts/DataBar'),
    DataMap: () => import('./charts/DataMap'),
    DataPie: () => import('./charts/DataPie'),
    DataRadar: () => import('./charts/DataRadar'),
    DataTimeLine: () => import('./charts/DataTimeLine')
  },
  data() {
    return {
      chartAdjust: new Chart('0px', '0px', 0, null, null),
      pieAdjust: new Chart('0px', '0px', 0, null, null),
      swiper: null
    }
  },
  mounted() {
    this.initLoop()

    this.chartAdjust.dom = document.querySelectorAll('.con-chart')[0]
    this.pieAdjust.dom = document.getElementById('last')

    adjust(this.chartAdjust)
    adjust(this.pieAdjust)
  },
  beforeDestroy() {
    if (this.chartAdjust.dom)
      this.chartAdjust.observer.unobserve(this.chartAdjust.dom)
    if (this.pieAdjust.dom)
      this.pieAdjust.observer.unobserve(this.pieAdjust.dom)
    this.swiper = null
    delete this.swiper
  },
  methods: {
    initLoop() {
      this.swiper = new Swiper('.swiper-container', {
        speed: 700,
        slidesPerView: 'auto',
        preventClicksPropagation: false,
        noSwiping: true,
        centeredSlides: true,
        on: {
          init: function () {
            // this.slides.removeClass('init')
          }
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/frostedGlass.scss';

.swiper-container {
  position: relative;
  height: 100%;

  > .swiper-wrapper {
    height: 100%;

    > .swiper-slide {
      width: 95vw;
      height: 100%;
    }
  }

  .chart-container {
    height: 83%;
    margin: 0 auto;

    @include glass;

    .el-row {
      height: 100%;

      .el-col {
        height: 100%;
      }

      .con-chart {
        height: 100%;
      }
    }

    > .title {
      font-size: 2vw;
      font-style: italic;
      color: #fff;
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 45%;
  }

  .swiper-button-prev {
    left: 3%;
  }

  .swiper-button-next {
    right: 3%;
  }
}

.swiper-slide {
  width: 1200px;
  padding: 0 calc((100vw - 816px) * 0.15);
  text-align: center;
}

.inner figure {
  width: 100%;
  height: 100%;
}
</style>
